<template>
  <div class="login-box">
    <!-- <div class="switch" >{{type==1?'切换管理员登录':'切换用户登录'}}</div> -->
    <h2>{{ user.type == 0 ? "用户登录" : "管理员登录" }}</h2>
    <span
      class="switch-type"
      @click="user.type = user.type == 1 ? 0 : 1"
      style="
        border-radius: 5px;
        color: #fff;
        position: absolute;
        right: 20px;
        top: 20px;
        border: 1px solid;
        padding: 2px;
        font-size: 14px;
        cursor: pointer;
      "
      >→ {{ user.type == 1 ? "用户登录" : "管理员登录" }}</span
    >

    <form>
      <!-- <div class="user-box">
        <input type="text" name="" />
        <label>姓名</label>
      </div> -->
      <div class="user-box">
        <input type="text" v-model="user.username" />
        <label>用户名</label>
      </div>
      <div class="user-box">
        <input type="password" v-model="user.password" />
        <label>密码</label>
      </div>
      <div class="user-footer">
        <a href="javascript:;" @click="userLogin">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          登录
        </a>
        <a href="javascript:;" @click="dialogVisible=true" v-if="user.type == 0">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          注册
        </a>

        <!-- <a href="#" @click="user.type = user.type == 1 ? 0 : 1">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          {{ user.type == 1 ? "用户登录":"管理员登录" }}
        </a> -->
      </div>
    </form>

    <el-dialog append-to-body v-model="dialogVisible" :title="'用户注册'" width="500px">
    <el-form
      
      :rules="rules"
      style="margin-top: 20px"
      ref="formEl"
      :model="user"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input  placeholder="用户名" :maxlength="20" v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="user.password"
          type="password"
          placeholder="输入密码"
          show-password
        />
      </el-form-item>
       <el-form-item label="姓名" prop="name">
        <el-input placeholder="输入姓名" :maxlength="20" v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="idCard">
        <el-input placeholder="输入身份证" :maxlength="20" v-model="user.idCard"></el-input>
      </el-form-item>
        <el-form-item label="手机号" prop="phone">
        <el-input placeholder="输入手机号" :maxlength="20" v-model="user.phone"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="userRegster">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>

  
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { login, register } from "../api/user";
const { proxy } = getCurrentInstance();
import { ElMessage } from "element-plus";

import {IdentityCodeValid,checkPhone} from '../utils/index'

const dialogVisible = ref(false)

const formEl =ref()

const identityCodeValid = (rule, value, callback) => {
  if (IdentityCodeValid(value)) {
    callback();
  } else {
    return callback(new Error("请输入正确的身份证"));
  }
};

const phoneValid = (rule, value, callback) => {
  if (checkPhone(value)) {
    callback();
  } else {
    return callback(new Error("请输入正确的手机号"));
  }
};


const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: '用户名长度需在6~20位',
      trigger: 'blur',
    },
  ],
   password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: '密码长度需在6~20位',
      trigger: 'blur',
    },
  ],
  name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
    {
      min: 2,
      message: '姓名至少2位',
      trigger: 'blur',
    },
  ],
  idCard: [
    {
      required: true,
      message: "请输入身份证",
      trigger: "blur",
    },
    {
      validator: identityCodeValid,
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      validator: phoneValid,
      trigger: "blur",
    },
  ],
});

let user = reactive({
  nickname: null,
  username: null,
  password: null,
  type: 0,
});

import { useRouter } from "vue-router";
const router = useRouter();
let userLogin = () => {
  login(user).then((res) => {
    localStorage.setItem("userId", res.data.id);
    localStorage.setItem("username", res.data.username);
    localStorage.setItem("name", res.data.name);

    ElMessage.success("登录成功");
    if (user.type == 0) {
      router.push("/order");
    } else {
      router.push("/sys/order");
    }
  });
};

let userRegster = () => {
   formEl.value.validate((valid) => {
    if (valid) {
       register(user).then((res) => {
        localStorage.setItem("userId", res.data.id);
        localStorage.setItem("username", res.data.username);
        localStorage.setItem("name", res.data.name);
         ElMessage.success("登录成功");
        router.push("/order");
  });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style scoped lang="less">
.switch-type {
  &:hover {
    color: deepskyblue !important;
  }
}
.user-footer {
  display: flex;
  justify-content: space-around;
}

.login-box {
  position: absolute;
  top: 40%;
  right: 0;
  width: 400px;
  padding: 40px;
  transform: translate(-20%, -50%);
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;

  .switch {
    border-radius: 20px;
    position: absolute;
    color: #fff;
    background: deepskyblue;
    width: 120px;
    height: 20px;
    padding: 10px;
    text-align: center;
    right: 20px;
    top: 20px;
    //   transform: translate(50%,0);
    cursor: pointer;
  }
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  margin-top: 40px;
  letter-spacing: 4px;
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>
